import { StyleProvider } from '@ant-design/cssinjs'
import { ConfigProvider, theme } from 'antd'
import 'antd/dist/reset.css'
// import en_US from 'antd/locale/en_US';
// import zh_CN from "antd/locale/zh_CN";
import useLocale from '@/i18n/useLocale'

import { usePlatformStore /* , usePlatformActions */ } from '@/store'

import { customThemeTokenConfig, themeModeToken, colorPrimarys, customComponentConfig } from './theme'

import { ThemeMode /* LocalEnum */ } from '#/enum'

type Props = {
  children: React.ReactNode
}

export default function AntdConfig({ children }: Props) {
  const { /* lang, */ theme: mode, primaryColor } = usePlatformStore()
  const algorithm = mode === ThemeMode.Light ? theme.defaultAlgorithm : theme.darkAlgorithm
  const colorPrimary = colorPrimarys[primaryColor]
  const { language } = useLocale()

  return (
    <ConfigProvider
      locale={language.antdLocal}
      theme={{
        token: { colorPrimary, ...customThemeTokenConfig, ...themeModeToken[mode].token },
        components: { ...customComponentConfig, ...themeModeToken[mode].components },
        algorithm,
        cssVar: true,
        hashed: false
      }}
    >
      <StyleProvider hashPriority='high'>{children}</StyleProvider>
    </ConfigProvider>
  )
}
